import { Popup, Picker, ConfigProvider, Col } from '@ray-js/smart-ui';

import React, { useState, useEffect } from 'react';
import styles from './index.module.less';
import Strings from '@/i18n';
import { View, Text, Input, Image } from '@ray-js/ray';
import { useDispatch, useSelector } from 'react-redux';
import { selectAttrs, updateAttrsAsync, updateAttrsExAsync } from '@/redux/modules/devAtts';
import { edit_unselected, ic_select, edit_selected, edit } from '@/res/index'
import { cloneDeep } from 'lodash-es';

import { getCapacitys, getDevId, isAllZeros, toTwoHex } from '@/utils';
type Props = {
  popShow: boolean,
  titleStr?: string,
  currentValue?: string,
  onConfirm?: (seleteTime: string) => void,
  onCancel?: () => void
};


export function PickerOilTypePopup(props: Props) {
  const dispatch = useDispatch();

  const devAttrs = useSelector(selectAttrs);
  const tTypes = devAttrs.slice(2);


  let defaultValue = props.currentValue == Strings.getLang("str_please_select") ? "0" : props.currentValue

  const [mEdit, setMEdit] = useState(true);

  const [mTypes, setMTypes] = useState(tTypes);


  const [mSelectIndex, setMSelectIndex] = useState(parseInt(devAttrs[1].value));

  useEffect(() => {
    setMTypes(tTypes);
    setMSelectIndex(parseInt(devAttrs[1].value));
  }, [devAttrs])

  let mColumns = [
    {
      values: getCapacitys(),
      style: { flex: 'none', color: '#75C6C0', width: '8px', display: 'flex', justifyContent: 'center' },
    },
  ]
  let curIndex = mColumns[0].values.indexOf(defaultValue)
  if (curIndex == -1) {
    curIndex = 0
  }
  const onOilPiackerConfirm = (index: string) => {
    dispatch(updateAttrsAsync({ code: "aromatherapyType", value: index }))
    props.onConfirm(index)

  }
  const  cancelEdit=()=>{
    setMEdit(true)
    setMTypes(tTypes);//取消复原数据
  }
  function getRightImg(index: number) {
    if (mEdit) {
      return index == mSelectIndex ? <Image mode='aspectFit' className={styles.ic_edit} src={ic_select} /> : null
    } else {
      return <Image mode='aspectFit' className={styles.ic_edit} src={index == mSelectIndex ? edit_selected : edit_unselected} />
    }
  }
  function handelEditBtn() {
    if (mEdit) {
      setMEdit(false)
    } else {
      dispatch(updateAttrsExAsync(mTypes))
      setMEdit(true)

    }
  }
  return (
    <Popup
      position="bottom"
      round
      overlay
      customStyle={{ height: '51vh', display: 'flex', flexDirection: 'column', marginBottom: "0px" }}
      show={props.popShow}  >
      <View style={{ marginTop: "10px" }}>
        <Col span="4"  ><Text className={styles.btn_cancel} onClick={() => { cancelEdit() }}>{Strings.getLang("str_cancel")}</Text></Col>
        <Col span="16" customClass={styles.centerH}> <Text className={styles.pageContainer_titile} >{Strings.getLang("aromatherapy_selection")}</Text></Col>
        <Col span="4"><Text className={styles.btn_confirm} onClick={() => { handelEditBtn() }}>  {mEdit ? Strings.getLang("str_edit") : Strings.getLang("str_finish")}</Text></Col>
      </View>
      <View className={styles.picker}> {
        mTypes && mTypes.map((item, index) => {
          return <View className={index == mSelectIndex ? styles.pickerCellSelect : styles.pickerCell} key={index} onClick={() => { setMSelectIndex(index) }} >
            <Input disabled={mEdit} className={styles.input} key={index} value={item.value.length ? item.value : Strings.getLang(`oil_type_${index + 1}`)}
              onInput={(e) => {
                setMTypes(tTypes.map((item, index) =>
                  index === mSelectIndex
                    ? { ...item, value: e.detail.value }
                    : item
                ));
              }}
            />
            {getRightImg(index)}
          </View>
        })
      }

      </View>
      {mEdit ? <View className={styles.btnLayout}>
        <Text className={styles.bottom_cancel} onClick={() => { props.onCancel() }}>{Strings.getLang("str_cancel")}</Text>
        <Text className={styles.bottom_comfirm} onClick={() => { onOilPiackerConfirm(mSelectIndex + "") }}>{Strings.getLang("str_confirm")}</Text>
      </View> : null
      }
    </Popup>
  );
}